<template>
  <div class="app">
    <NavBar />
    <router-view></router-view>
  </div>
</template>

<script setup>
import NavBar from './components/NavBar.vue'
</script>

<style>
:root {
  --primary-color: #3498db;
  --secondary-color: #95a5a6;
  --bg-color: #ffffff;
  --text-color: #333333;
  --border-color: #eeeeee;
}

html.dark {
  --primary-color: #3498db;
  --secondary-color: #95a5a6;
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
  --border-color: #333333;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

.app {
  width: 100%;
  min-height: 100vh;
  /* background-color: var(--bg-color); */
  background-color: var(--background-color);
}

/* 为固定导航栏和分类标签预留空间 */
.app > :not(nav) {
  padding-top: 60px;
}
</style> 